<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- translate, rotate, scale改变的是画布的坐标系 -->
    <!-- save resotre的使用 -->
    <!-- 画一个钟表 -->
    <!-- 調用了stroke的地方, 主要使用ctx.begin()和ctx.closePath() -->
    <canvas id="canvas" width="800" height="800"></canvas>
    <script>
        var canvas = document.querySelector('#canvas')
        var ctx = canvas.getContext('2d')
       
      
        
        setInterval(function() {
             // 对圆心初始位置进行保存
             ctx.save()
            ctx.clearRect(0,0,800,800)
            

            // 改变圆心位置
            ctx.translate(400,400)
            ctx.rotate(-2*Math.PI/4)
            ctx.save()

            // 圆盘
            ctx.beginPath()
            ctx.arc(0, 0, 200, 0, 2*Math.PI)
            ctx.stroke()
            ctx.closePath()

            // 小时刻度线
            for(let i=0; i<12; i++) {
                ctx.beginPath()
                ctx.rotate(Math.PI / 6)
                ctx.moveTo(180,0) 
                ctx.lineTo(200, 0)
                ctx.stroke()
                ctx.closePath()
            }

            // 分钟刻度线
            ctx.restore()
            ctx.save()

            for (let j=0;j<60;j++) {
                ctx.beginPath()
                ctx.rotate(Math.PI / 30)
                ctx.moveTo(180, 0)
                ctx.lineTo(190, 0)
                ctx.stroke()
                ctx.closePath()
            }
            ctx.restore()
            ctx.save()

            var date = new Date()
            var hour = date.getHours()
            var min = date.getMinutes()
            var sec = date.getSeconds()
            hour = hour > 12 ? hour-12 : hour;
            console.log(hour,min,sec)

            // 时针
            ctx.beginPath()
            ctx.rotate(2*Math.PI/12*hour + 2*Math.PI/12/60*min + 2*Math.PI/12/60/60*sec)
            ctx.moveTo(-10,0)
            ctx.lineTo(150, 0)
            ctx.strokeStyle = 'red'
            ctx.lineWidth = 10
            ctx.stroke()
            ctx.closePath()
            ctx.restore()
            ctx.save()

            // 分针
            ctx.beginPath()
            ctx.rotate(2*Math.PI/60*min + 2*Math.PI/60/60*sec)
            ctx.moveTo(-20,0)
            ctx.lineTo(120, 0)
            ctx.strokeStyle='green'
            ctx.lineWidth=5
            ctx.stroke()
            ctx.closePath()
            ctx.restore()
            ctx.save()

            // 秒针
            ctx.beginPath()
            ctx.rotate(2*Math.PI/60*sec)
            ctx.moveTo(-50,0)
            ctx.lineTo(170, 0)
            ctx.strokeStyle = 'blue'
            ctx.lineWidth = 2
            ctx.stroke()
            ctx.closePath()
            ctx.restore()
            ctx.restore()

        }, 1000)
        
    </script>
</body>
</html>